import { DatePicker } from '@/components/AntdProxy';
import CommonDrawer from '@/components/CommonDrawer';
import CommonTable from '@/components/CommonTable';
import { REQUIRED } from '@/constants/rules';
import useMaterial from '@/hooks/useMaterial';
import request from '@/utils/request';
import { Form, message } from 'antd';
import dayjs from 'dayjs';
import styles from './index.less';

const Copy = (props) => {
  const { open, records, onCancel, onOk } = props;
  const [form] = Form.useForm();

  const { materialTypeMap } = useMaterial();

  const columns = [
    {
      title: '线路',
      dataIndex: 'lineName',
    },
    {
      title: '物料类型',
      dataIndex: 'type',
      render: (text) => materialTypeMap[text],
    },
  ];

  const handleOk = async () => {
    const values = await form.validateFields();
    console.log('values', values);
    const params = {
      ...values,
      day: values.day ? dayjs(values.day).format('YYYY-MM-DD') : '',
      ids: records?.map?.((record) => record.linePlanId),
    };
    await request({
      url: '/datas/line/plan/copy',
      method: 'POST',
      data: params,
    });
    message.success('操作成功');
    onOk?.();
  };

  return (
    <CommonDrawer
      title="复制计划"
      open={open}
      onClose={onCancel}
      onOk={handleOk}
      afterOpenChange={(visible) => {
        if (!visible) {
          form.resetFields();
        }
      }}
      width={500}
      destroyOnHidden
    >
      <div className={styles.copy}>
        <Form form={form} layout="vertical">
          <Form.Item
            label="计划日期"
            name="day"
            rules={[REQUIRED]}
            initialValue={dayjs().add(1, 'day')}
          >
            <DatePicker placeholder="请选择日期" />
          </Form.Item>
        </Form>
        <section className={styles.table}>
          <CommonTable
            dataSource={records}
            columns={columns}
            pagination={false}
          />
        </section>
      </div>
    </CommonDrawer>
  );
};

export default Copy;
